﻿<MCard
    MaxWidth="500"
    Class="mx-auto">
    <MToolbar
        Color="indigo"
        Dark>
        <MAppBarNavIcon></MAppBarNavIcon>

        <MToolbarTitle>Inbox</MToolbarTitle>

        <MSpacer></MSpacer>

        <MButton Icon>
            <MIcon>mdi-magnify</MIcon>
        </MButton>

        <MButton Icon>
            <MIcon>mdi-dots-vertical</MIcon>
        </MButton>
    </MToolbar>
    <MList>
        @foreach (var item in items)
        {
            <MListItem >
                <MListItemIcon>
                    @if (item.icon)
                    {
                        <MIcon Color="pink">
                            mdi-star
                        </MIcon>
                    }
                </MListItemIcon>

                <MListItemContent>
                    <MListItemTitle>@item.title</MListItemTitle>
                </MListItemContent>

                <MListItemAvatar>
                    <MImage Src="@item.avatar"></MImage>
                </MListItemAvatar>
            </MListItem>
        }
    </MList>
</MCard>

@code {

    List<(bool icon, string title, string avatar)> items = new List<(bool icon, string title, string avatar)>()
    {
        new(true, "Jason Oner", "https://cdn.masastack.com/stack/images/website/masa-blazor/lists/1.png"),
        new(false, "Travis Howard", "https://cdn.masastack.com/stack/images/website/masa-blazor/lists/2.png"),
        new(false, "Ali Connors", "https://cdn.masastack.com/stack/images/website/masa-blazor/lists/3.png"),
        new(false, "Cindy Baker", "https://cdn.masastack.com/stack/images/website/masa-blazor/lists/4.png"),
    };

}